<template>
  <base-breadcrumb :state="state" :breadcrumb="!isAudit">
    <b-steps
      :current="stepVal"
      direction="vertical"
      @change.self="stepChange"
    >
      <b-step title="基本信息">
        <a-card
          v-if="activeKey[0]"
          slot="description"
          v-loading="loading"
          :bordered="false"
        >
          <template v-if="formData.fromStatus === 1">
            <a-form-model ref="ruleForm" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row>
                <a-col span="8">
                  <a-form-model-item label="合同编号" prop="code">
                    <BaseInput v-model="formData.code" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="工程名称" prop="constructionTypeId">
                    <BSelect v-model="formData.constructionTypeId" :request="()=>selectOption({type: 18     })"
                             disabled
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同名称">
                    <BaseInput v-model="formData.name" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="供应商名称">
                    <BaseInput v-model="formData.supplier" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="供应商编码">
                    <BaseInput v-model="formData.supplierCode" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同类别" prop="contractTypeId">
                    <a-select v-model="formData.contractTypeId" placeholder="请选择" disabled>
                      <a-select-option v-for="item in typeArr" :key="item.id" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="材料类别">
                    <BaseInput v-model="formData.materialClassName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同文本" prop="textId">
                    <a-select v-model="formData.textId" placeholder="请选择" disabled>
                      <a-select-option v-for="item in textArr" :key="item.id + '1'" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="前期招标资料" prop="preBidFiles">
                    <a-select v-model="formData.preBidFiles" placeholder="请选择" disabled>
                      <a-select-option :value="1">具备</a-select-option>
                      <a-select-option :value="0">不具备</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="对方签约授权委托" prop="delegation">
                    <a-select v-model="formData.delegation" placeholder="请选择" disabled>
                      <a-select-option :value="1">具备</a-select-option>
                      <a-select-option :value="0">不具备</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="联系人" prop="contactsPeople">
                    <BaseInput v-model="formData.contactsPeople" :disabled="state === 3" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="电话" prop="contactsTel">
                    <BaseInput v-model="formData.contactsTel" :disabled="state === 3" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="材料工程师" prop="supervisorEng">
                    <a-input-search
                      v-model="formData.supervisorEng"
                      :placeholder="state === 3 ? '' : '请选择'"
                      :disabled="state === 3"
                      @search="$refs.personList.open()"
                      @click="$refs.personList.open()"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="数量总额">
                    <BaseInput v-model="formData.numberTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同价款总额(税前)(元)">
                    <BaseInput v-model="formData.contractNumberPriceTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="总收益金额(元)">
                    <BaseInput v-model="formData.incomeAmountTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="总利润率" prop="size">
                    <BaseInput v-model="formData.profitRateTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="所属单位">
                    <BaseInput v-model="formData.branchCompanyName + '/' + formData.projectName" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- <a-col span="8">
                  <a-form-model-item label="项目名称">
                    <BaseInput v-model="formData.projectName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="分公司名称">
                    <BaseInput v-model="formData.branchCompanyName" disabled />
                  </a-form-model-item>
                </a-col> -->
                <a-col span="8">
                  <a-form-model-item label="甲方">
                    <BaseInput v-model="formData.firstParty" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同生效日期">
                    <BaseInput v-model="formData.startDate" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同终止日期">
                    <BaseInput v-model="formData.endDate" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同签订日期">
                    <BaseInput v-model="formData.signDate" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="付款方式">
                    <BaseInput v-model="formData.payTypeStr" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同种类">
                    <BaseInput v-model="formData.typeName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="是否采集">
                    <BaseInput v-model="formData.collectName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="用印日期">
                    <BaseInput v-model="formData.applyDate" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="补录人">
                    <BaseInput v-model="formData.creatorName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="补录时间">
                    <BaseInput v-model="formData.modifiedTime" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </template>
          <template v-else>
            <a-form-model ref="ruleForm" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row>
                <a-col span="8">
                  <a-form-model-item label="合同编号">
                    <BaseInput v-model="formData.code" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="工程名称">
                    <BaseInput v-model="formData.constructionTypeName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同名称">
                    <BaseInput v-model="formData.name" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="供应商名称">
                    <BaseInput v-model="formData.supplier" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="供应商编码">
                    <BaseInput v-model="formData.supplierCode" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同类别">
                    <a-select v-model="formData.contractTypeId" disabled>
                      <a-select-option v-for="item in typeArr" :key="item.id" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <!-- <a-col span="8">
                  <a-form-model-item label="材料类别">
                    <BaseInput v-model="formData.materialClassName" disabled />
                  </a-form-model-item>
                </a-col> -->
                <a-col span="8">
                  <a-form-model-item label="合同文本">
                    <a-select v-model="formData.textId" disabled>
                      <a-select-option v-for="item in textArr" :key="item.id + '1'" :value="item.id">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="前期招标资料">
                    <a-select v-model="formData.preBidFiles" disabled>
                      <a-select-option :value="1">具备</a-select-option>
                      <a-select-option :value="0">不具备</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="对方签约授权委托">
                    <a-select v-model="formData.delegation" disabled>
                      <a-select-option :value="1">具备</a-select-option>
                      <a-select-option :value="0">不具备</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="联系人" prop="contactsPeople">
                    <BaseInput v-model="formData.contactsPeople" :disabled="state === 3" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="电话" prop="contactsTel">
                    <BaseInput v-model="formData.contactsTel" :disabled="state === 3" />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="材料工程师" prop="supervisorEng">
                    <!--                                    <BaseInput v-model="formData.creatorName" disabled />-->
                    <a-input-search
                      v-model="formData.supervisorEng"
                      :placeholder="state === 3 ? '' : '请选择'"
                      :disabled="state === 3"
                      @search="$refs.personList.open()"
                      @click="$refs.personList.open()"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="数量总额">
                    <BaseInput v-model="formData.numberTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="合同价款总额(税前)(元)">
                    <BaseInput v-model="formData.contractNumberPriceTotal" disabled />
                  </a-form-model-item>
                </a-col>

                <a-col span="8">
                  <a-form-model-item label="总收益金额(元)">
                    <BaseInput v-model="formData.incomeAmountTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="总利润率" prop="size">
                    <BaseInput v-model="formData.profitRateTotal" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="所属单位">
                    <BaseInput v-model="formData.branchCompanyName + '/' + formData.projectName" disabled />
                  </a-form-model-item>
                </a-col>
                <!-- <a-col span="8">
                  <a-form-model-item label="项目名称">
                    <BaseInput v-model="formData.projectName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="分公司名称">
                    <BaseInput v-model="formData.branchCompanyName" disabled />
                  </a-form-model-item>
                </a-col> -->
                <a-col span="8">
                  <a-form-model-item label="合同种类">
                    <BaseInput v-model="formData.typeName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="是否采集">
                    <BaseInput v-model="formData.collectName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col span="8">
                  <a-form-model-item label="用印日期" prop="size">
                    <BaseInput v-model="formData.applyDate" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </template>

          <div class="pub-next-btn">
            <a-button v-if="state !== 3" :loading="loading" type="primary" @click="temporaryStorage()">保存</a-button>
            <a-button type="primary" @click="temporaryStorage(true)">下一步</a-button>
          </div>
        </a-card>
      </b-step>
      <b-step title="合同明细">
        <a-card
          v-if="activeKey[1] && isSubmit"
          slot="description"
          :bordered="false"
        >
          <materials
            :id="formData.id || null"
            :state="state"
          />
          <div class="pub-next-btn">
            <a-button
              type="primary"
              @click="previous"
            >
              上一步
            </a-button>
            <a-button
              type="primary"
              @click="next"
            >
              下一步
            </a-button>
          </div>
        </a-card>
      </b-step>
      <b-step title="相关附件">
        <a-card v-if="activeKey[2]" slot="description" :bordered="false">
          <u-table
            :isShow="state !== 3"
            :deleteUrl="fileDel"
            :uploadList="addFile"
            :list-url="fileList" :business-id="formData.id" business-code="MM09"
          />

          <div class="pub-next-btn">
            <a-button
              type="primary"
              @click="previous"
            >
              上一步
            </a-button>
          </div>
        </a-card>
      </b-step>
    </b-steps>
    <div class="pub-header-btn page-btn-right-top">
      <!-- <a-button type="primary" @click="submit" v-if="state !== 3">
                提交
            </a-button> -->
      <a-button @click="$close">关闭</a-button>
    </div>
    <person-list ref="personList" @getPerson="getPerson" />
  </base-breadcrumb>
</template>
<script>
import { parameterEdit, findListByMainId } from '@/api/material/contract/parameter'
import materials from '../components/materials/materials'
import { selectOption } from '@/api/material/goods/goods'
import { addFile, fileDel, fileList } from '@/api/material/contract/review'
import ProjectDepTree from '@/components/ProjectDepTree'

export default {
  name: 'a' + Date.now(),
  components: {
    materials,
    ProjectDepTree
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectOption,
      activeKey: [true, false, false, false, false, false, false],
      loading: false,
      stepVal: 0,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      state: Number(this.$route.query.state),
      isSubmit: false,
      formData: {
        id: '',
        code: '',
        name: '',
        supplier: null,
        supplierCode: null,
        contractTypeId: null,
        textId: null,
        sourceId: null,
        contactsPeople: '',
        contactsTel: '',
        supervisor: '',
        contractPriceTotal: '',
        numberTotal: '',
        contractNumberPriceTotal: '',
        settlePriceTotal: '',
        incomeAmountTotal: '',
        profitRateTotal: '',
        projectName: '',
        projectCode: '',
        branchCompanyName: '',
        branchCompanyCode: '',
        supervisorEng: '',
        isPreBidFiles: null,
        isDelegation: null,
        contactsPeopleId: 1,
        supplierId: null,
        fromStatus: 0
      },
      sourceArr: [],
      typeArr: [],
      textArr: [],
      isNext: false,
      fileList: fileList(),
      addFile: addFile(),
      fileDel: fileDel()
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.state = 3
        }
      }
    },
    stepVal(newVal, oldVal) {
      this.$set(this.activeKey, newVal, true)
    }
  },
  created: async function() {
    // 处理formData.id 在await后赋值时， 子组件u-table在created 生命周期无法读取id，导致没有调用文件列表接口问题
    if (this.$route.query.id) {
      this.formData.id = this.$route.query.id
      if (this.state === 3) {
        this.activeKey = [true, true, true, true, false, false, false]
      }
    }
    this.loading = true
    await this.getSource()
    await this.getType()
    await this.getText()
    if (this.$route.query.id) {
      // this.formData.id = this.$route.query.id
      await this.getEditInfo()
      this.isSubmit = true
      // if (this.state === 3) {
      //   this.activeKey = [true, true, true, true, false, false, false]
      // }
    }
    this.loading = false
  },
  methods: {
    getPerson: function(row) {
      this.formData.supervisorEng = row.name
      this.formData.supervisorEngId = row.id
    },
    previous: function() {
      this.isNext = true
      this.stepVal--
      if (this.stepVal < 0) {
        this.stepVal = 0
      }
    },
    async getSource() {
      let res = await selectOption({ type: 13 })
      if (res.code === 200) {
        this.sourceArr = res.data
        this.formData.sourceId = this.sourceArr[0].id
      }
    },
    async getType() {
      let res = await selectOption({ type: 14 })
      if (res.code === 200) {
        this.typeArr = res.data
        this.formData.contractTypeId = this.typeArr[0].id
      }
    },
    async getText() {
      let res = await selectOption({ type: 9 })
      if (res.code === 200) {
        this.textArr = res.data
        this.formData.textId = this.textArr[0].id
      }
    },
    stepChange: function(val) {
      if (!this.formData) {
        if (val) {
          this.$message.warning('切换步骤前请先填写基本信息')
          this.stepVal = 0
        }
      } else {
        if (!this.isNext) {
          this.$set(this.activeKey, val, !this.activeKey[val])
        }
      }
      this.isNext = false
    },
    // 获取编辑回显数据
    async getEditInfo() {
      this.loading = true
      let res = await findListByMainId({ id: this.formData.id })
      this.loading = false
      if (res.code === 200) {
        this.formData = { ...this.formData, ...res.data }
        // this.formData.fromStatus = 0
        console.log(this.formData)
        if (this.formData.delegation !== null) {
          this.formData.delegation = this.formData.delegation ? 1 : 0
        }
        if (this.formData.preBidFiles !== null) {
          this.formData.preBidFiles = this.formData.preBidFiles ? 1 : 0
        }
      }
    },
    submit() {
      // this.save('approve');
      if (this.isSubmit) {
        this.$router.push({ name: 'goodsMaintenanceList' })
      } else {
        this.$message.warning('提交之前请先暂存')
      }
    },
    async temporaryStorage(isNext) {
      if (this.state === 3 && isNext) {
        return this.next()
      }
      this.loading = true
      let temp = this.$clone(this.formData)
      if (temp.delegation !== null) {
        temp.isDelegation = temp.delegation = temp.delegation === 1
      }
      if (temp.preBidFiles !== null) {
        temp.isPreBidFiles = temp.preBidFiles = temp.preBidFiles === 1
      }
      let res = await parameterEdit(temp)
      this.loading = false
      if (res.code === 200) {
        this.$message.success('编辑成功')
        this.isSubmit = true
        isNext && this.next()
      }
    },
    next: function(val) {
      this.isNext = true
      this.stepVal++
    }
  }
}
</script>
